<template>
  <view class="big">
    <nut-cell-group class="main">
      <nut-cell title="发票金额">
        <template v-slot:link>
          <view style="color: #0966ff">￥{{ moneyFilter() }}</view>
        </template>
      </nut-cell>
      <nut-cell
        title="发票类型"
        is-link
        :desc="invoicingType == '1' ? '普通发票' : '专票发票'"
        @click="chooseInvoiceType"
      ></nut-cell>
      <nut-cell
        title="发票抬头"
        is-link
        :desc="headTile||'请选择'"
        @click="gotoChooseTitle"
        :class="!headTile?'noTitle':''"
      ></nut-cell>
      <nut-cell>
        <template v-slot:title>
          <view class="deliveryMethod"
            ><view>寄递方式</view
            ><nut-radio-group v-model="formData.sendType" direction="horizontal">
              <nut-radio label="1">网点领取</nut-radio>
              <nut-radio label="2">邮寄</nut-radio>
              <nut-radio label="3">电子邮箱</nut-radio>
            </nut-radio-group></view
          >
          <view class="network" v-if="formData.sendType == '1'">
            <view class="row">
              <image
                class="wangdianImg"
                src="@/assets/images/index/wangdian_img_tuijianwangdian.png"
              ></image>
              <view class="text">
                <view class="text1">{{ invoicingStore.invoicingList[0].destinationBranch }}</view>
                <view class="text2">{{ invoicingStore.invoicingList[0].destinationBranchName }}</view>
                <view class="text3">距离收货地 {{ invoicingStore.invoicingList[0].startBranchDistance }}</view>
              </view>
              <view class="icon_group">
                <view @click="toDial">
                  <image
                      src="@/assets/images/index/icon_wangdiandianhua.png"
                  ></image>
                </view>
                <view @click="toMap" style="margin-left: 5px">
                  <image
                      src="@/assets/images/index/icon_wangdiandaohang.png"
                  ></image>
                </view>
              </view>
            </view>
            <nut-cell
              style="background: #f5f5f5"
              title="预约领取时间"
              is-link
              :desc="formData.receiveTime||'请选择时间'"
              @click="openDateChoose"
            ></nut-cell>
          </view>
          <view class="mail" v-if="formData.sendType == '2'">
            <view class="flex">
              <view class="cellTitle">收件人</view>
              <nut-input v-model="formData.recipientName" placeholder="请填写收件人"></nut-input>
            </view>
            <view class="flex">
              <view class="cellTitle">联系方式</view>
              <nut-input v-model="formData.recipientPhone" placeholder="请填写联系方式"></nut-input>
            </view>
            <view class="flex">
              <view class="cellTitle">邮寄地址</view>
              <nut-input v-model="formData.sendAdd" placeholder="请填写邮寄地址"></nut-input>
            </view>
          </view>
          <view class="email" v-if="formData.sendType == '3'">
            <nut-cell style="background: #f5f5f5">
              <view class="flex"
                ><view class="emailTitle">电子邮箱</view
                ><nut-input v-model="formData.email" placeholder="请输入电子邮箱"
              /></view>
            </nut-cell>
          </view>
          <!-- 普票/专票选择弹框 -->
          <nut-popup
            position="bottom"
            round
            :style="{ height: '30%' }"
            v-model:visible="selectionShow"
          >
            <view class="popTitle">发票类型</view>
            <view class="popBtnBox">
              <view
                :class="{
                  btnItem: true,
                  choosed: invoicingType == '1',
                }"
                @click="invoicingTypeDetermine('1')"
              >
                普票
              </view>
              <view
                :class="{
                  btnItem: true,
                  choosed: invoicingType == '2',
                }"
                @click="invoicingTypeDetermine('2')"
              >
                专票
              </view>
            </view>
          </nut-popup>
        </template>
      </nut-cell>
    </nut-cell-group>
    <!-- 底部 -->
    <view class="bottomBox">
        <nut-button type="info" class="botBtn" color="#0966ff" @click="submit">提交申请</nut-button>
    </view>
    <date-choose :show="dateObj.show" :date="dateObj.date" :startTime="dateObj.startTime" :endTime="dateObj.endTime" @close="closeDateChoose" />
  </view>
  <dialBranch :show="showTelPopup" :tel="branchTel" :title="'拨打电话'" @close="showTelPopup=false" :show-close="true"></dialBranch>
</template>
<script lang="ts" setup>
import { ref } from "vue";
import useInvoicingStore from "@/store/invoicing";
import Taro, {env, useDidShow} from "@tarojs/taro";
import dateChoose from './dateChoose.vue'
import {$get, $post, getBranchTel} from "@/@api";
import dialBranch from "@/components/dialBranch/index"

const invoicingStore = useInvoicingStore();

const invoicingType = ref<string>("1");
const headTile = ref<string>('')
const selectionShow = ref<boolean>(false);
const dateObj = ref<any>({
  show: false,
  date: '',
  startTime: '',
  endTime: '',
})
const formData = ref({
  btihId: '',
  sendType: '1',
  email: '',
  receiveTime: '',
  longitude: '',
  latitude: '',
  recipientName: invoicingStore.invoicingList[0].receiver || '',
  recipientPhone: invoicingStore.invoicingList[0].receiverTel || '',
  sendAdd: invoicingStore.invoicingList[0].toFromAdd || '',
});
const companyNo = ref(invoicingStore.invoicingList[0].destinationBranch||'')
//费用计算
function moneyFilter() {
  let money: any = 0;
  invoicingStore.invoicingList[0].costList.forEach((item: any) => {
    money += item.money;
  });
  return money;
}
const openDateChoose = ()=>{
  dateObj.value.show = true
}
const closeDateChoose = (save, times)=>{
  if(save){
    formData.value.receiveTime = times.date + ' ' + times.start + '~~' + times.date + ' ' + times.end
  }
  dateObj.value.show = false
}
//打开发票类型选择弹框
function chooseInvoiceType() {
  selectionShow.value = true;
}
//发票类型选择
function invoicingTypeDetermine(index: string) {
  invoicingType.value = index
  selectionShow.value = false
}
//选择发票抬头
function gotoChooseTitle() {
  if (invoicingType.value == "1") {
    Taro.navigateTo({
      //url: "/pages/invoicing/ordinaryInvoice",
      url: "/pages/invoicing/myTitle?billType=1",
    });
  } else {
    Taro.navigateTo({
      //url: "/pages/invoicing/specialInvoice",
      url: "/pages/invoicing/myTitle?billType=2",
    });

  }
}

const submit = async ()=>{
  //let billNos = invoicingStore.invoicingList.map(item=>{return item.billNo}).join(',')
  if(!formData.value.btihId){
    Taro.showToast({
      icon: 'none',
      title: '请选择发票抬头'
    })
    return
  }
  if(formData.value.sendType == '3' && !formData.value.email){
    Taro.showToast({
      icon: 'none',
      title: '请选择网点'
    })
    return
  }
  if(formData.value.sendType == '2' && !formData.value.recipientName && !formData.value.recipientPhone && !formData.value.sendAdd){
    Taro.showToast({
      icon: 'none',
      title: '请填写收件信息'
    })
    return
  }
  if(formData.value.sendType == '3' && !formData.value.email){
    Taro.showToast({
      icon: 'none',
      title: '请填写电子邮箱'
    })
    return
  }

  let postData = [{
    arrays: invoicingStore.invoicingList.map(item=>{
      return {
        billNos: item.billNo,
        ...formData.value
      }
    }),
    companyNo: companyNo.value
  }]
  const res:any = await $post(
      "/selfmachine-system/invoice/applyFor",
      postData
  )
  if(res.data.code==200){
    Taro.navigateTo({
      url: `/pages/invoicing/success?sendType=${formData.value.sendType}&receiveTime=${formData.value.receiveTime}&ssiId=${res.data.data[0]}`
    })
  }
}

//网点电话弹窗
const showTelPopup = ref<boolean>(false)
const branchTel = ref<string>('')
const toDial= async () => {
  let res = await getBranchTel([{branchCompanyNo:invoicingStore.invoicingList[0].destinationBranch}])
  if(res.code == 200 && res.data && res.data.length){
    branchTel.value = res.data[0].tel
    showTelPopup.value = true
  }
  else{
    Taro.showToast({
      icon: 'none',
      title: '该网点无联系方式'
    })
  }
}
const toMap = (i) => {
  $get("/selfmachine-system/branch/particulars", {
    branchCompanyNo: invoicingStore.invoicingList[0].destinationBranch,
  }).then((res: any) => {
    if (res.data.code == 200) {
      Taro.openLocation({
        longitude: Number(res.data.data.localX || res.data.data.lng),
        latitude: Number( res.data.data.localY || res.data.data.lat),
        scale: 11,
      });
    }
  });
}

useDidShow(()=>{
  let pages = Taro.getCurrentPages();
  let currPage = pages[pages.length - 1];
  if (currPage.__data__.info) {
    headTile.value = currPage.__data__.info.headTile || ''
    formData.value.btihId = currPage.__data__.info.btihId
  }
})
</script>
<style lang="scss">
.big {
  height: 100%;
  width: 100%;
  background: #f5f5f5;
  box-sizing: border-box;
  padding: 24rpx;
  .main {
    background: white;
    .deliveryMethod {
      display: flex;
      justify-content: space-between;
    }
  }
  .nut-cell__value {
    color: #252525;
  }
  .noTitle {
    .nut-cell__value {
      color: #999 !important;
    }
  }
}

.mail {
  background: #f5f5f5;
  border-radius: 8rpx;
  .flex {
    display: flex;
    height: 88rpx;
    line-height: 88rpx;
    font-size: 28rpx;
    color: #252525;
    padding: 0 20rpx;
    box-sizing: border-box;
    .nut-input {
      padding: 0;
      border: none;
      font-size: 28rpx;
      background-color: transparent;
      line-height: 88rpx;
      height: 88rpx;
      .nut-input-inner {
        line-height: 88rpx;
        height: 88rpx;
      }
    }
  }
  .cellTitle {
    width: 150rpx;
    color: #666666 !important;
  }
}
.network {
  .nut-cell__value {
    color: #999999 !important;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .row {
    position: relative;
    width: 100%;
    height: 176rpx;
    //   padding: 0 30rpx;
    box-sizing: border-box;
    display: flex;
    align-items: center;

    .wangdianImg {
      width: 112rpx !important;
      height: 112rpx !important;
      margin-right: 16rpx;
    }
    .text {
      height: 112rpx;
      width: 250rpx;
      .text1 {
        font-weight: 700;
        font-size: 28rpx;
        color: #252525;
      }
      .text2 {
        font-size: 22rpx;
        color: #666666;
        margin-bottom: 6rpx;
        line-height: 30rpx;
        width: 300rpx;
        height: 30rpx;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .text3 {
        font-size: 22rpx;
        color: #666666;
      }
    }
    .icon_group {
      display: flex;
      height: 100%;
      align-items: center;
      margin-left: 100rpx;
      image {
        width: 64rpx;
        height: 64rpx;
      }
    }
  }
}
.email {
  .flex {
    display: flex;
    .emailTitle {
      width: 200rpx;
      line-height: 45rpx;
    }
    .nut-input {
      height: 50rpx !important;
      padding: 0 !important;
      background: #f5f5f5 !important;
    }
  }
}
.popTitle {
  font-size: 32rpx;
  line-height: 112rpx;
  height: 112rpx;
  color: black;
  padding-left: 24rpx;
}
.popBtnBox {
  width: 100%;
  display: flex;
  justify-content: space-around;
  .btnItem {
    width: 320rpx;
    height: 72rpx;
    box-sizing: border-box;
    border-radius: 88rpx;
    border: 2rpx solid rgba(0, 0, 0, 0.06);
    line-height: 72rpx;
    text-align: center;
  }
  .choosed {
    color: #0966ff;
    border: 1px solid #0966ff !important;
  }
}
.bottomBox{
    background: white;
    position: fixed;
    bottom: 0;
    height: 128rpx;
    padding: 20rpx 0;
    box-sizing: border-box;
    border-top: 2rpx solid #F5F5F5;
    .botBtn{
        width: 700rpx;
        margin: 0 auto;
    }
}
</style>
